<template>
	<view class="min-h-[100vh] bg-background">
		<view class="bg-white px-[30rpx]">
			<view class="py-[32rpx] border-b border-[#F5F5F5] text-[28rpx] flex items-center leading-none">
				<view class="mr-[48rpx] w-[4em] whitespace-nowrap">收货人</view>
				<input class="text-[28rpx] flex-1" type="text" placeholder="姓名" v-model="address.name" />
			</view>
			<view class="py-[32rpx] border-b border-[#F5F5F5] text-[28rpx] flex items-center leading-none">
				<view class="mr-[48rpx] w-[4em] whitespace-nowrap">联系电话</view>
				<input class="text-[28rpx] flex-1" type="number" placeholder="手机号" maxlength="11" v-model="address.phone" />
			</view>
			<view class="py-[32rpx] border-b border-[#F5F5F5] text-[28rpx] flex items-center leading-none" @click="visible = true">
				<view class="mr-[48rpx] w-[4em] whitespace-nowrap">选择地区</view>
				<view class="text-[28rpx] flex-1" v-if="address.area">{{ address.province }}/{{ address.city }}/{{ address.area }}</view>
				<view class="text-[28rpx] flex-1 text-[#929292]" v-else>省、市、区</view>
				<view class="flex items-center" @click.stop="chooseAddress">
					<up-icon name="map" size="36rpx"></up-icon>
					<text>定位</text>
				</view>
			</view>
			<view class="py-[32rpx] border-b border-[#F5F5F5] text-[28rpx] flex items-start leading-none">
				<view class="mr-[48rpx] w-[4em] whitespace-nowrap">详细地址</view>
				<textarea class="h-[180rpx] flex-1" maxlength="100" placeholder="如校区、楼栋号、门牌号等" v-model="address.addressDetail"></textarea>
			</view>
		</view>
		<view class="flex items-center justify-between p-[30rpx] bg-white mt-[20rpx]">
			<view class="text-[28rpx]">设为默认地址</view>
			<view class="" @click="address.isDefault = !address.isDefault">
				<up-image :src="check" v-if="!address.isDefault" width="28rpx" height="28rpx"></up-image>
				<up-image :src="checked" v-else width="28rpx" height="28rpx"></up-image>
			</view>
		</view>
		<view class="mx-auto py-[22rpx] bg-second w-[90%] rounded-[16rpx] text-white text-[32rpx] text-center mt-[72rpx]" @click="addAddress">提交</view>
		<cityPicker
			:column="3"
			:default-value="[address.province, address.city, address.area]"
			:mask-close-able="true"
			@confirm="confirm"
			@cancel="visible = false"
			:visible="visible"
		/>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import useAddress from '@/hooks/useAddress';
import check from '@/static/check.png';
import checked from '@/static/checked.png';
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
import { ref } from 'vue';
onLoad((options) => {
	const addressVal = JSON.parse(options.address);
	console.log(addressVal.id);
	if (addressVal.id) {
		address.id = addressVal.id;
		address.name = addressVal.name;
		address.phone = addressVal.phone;
		address.province = addressVal.province;
		address.city = addressVal.city;
		address.area = addressVal.area;
		address.addressDetail = addressVal.addressDetail;
		address.isDefault = addressVal.isDefault;
	}
	uni.setNavigationBarTitle({
		title: addressVal.id ? '修改地址' : '添加地址'
	});
});
const visible = ref(false);
const confirm = (e) => {
	address.province = e.provinceName;
	address.city = e.cityName;
	address.area = e.areaName;
	visible.value = false;
};
const { address, addAddress, chooseAddress, getWxAddress } = useAddress();
</script>

<style scoped lang="scss"></style>
